<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .dami {
            width: 1200px;
            height: 7000px;
            border: 1px solid red;
        }

        .damitoubu {
            width: 1200px;
            height: 42px;
            background-color: #333;
        }

        .toubucon {
            width: 1000px;
            height: 100%;
            display: flex;
            margin: 0 auto;
            justify-content: space-between;
        }

        .toubuleft {
            width: 600px;
            height: 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            font-size: 13px;
            color: #ccc;
        }

        .toubuleft li {
            display: flex;
            justify-content: space-around;
        }

        .toubuleft li p {
            margin-right: 10px;
        }



        .toubumiddle {
            width: 100px;
            height: 100%;
            /* border: 1px solid red; */
            margin-left: 155px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            font-size: 13px;
            color: #ccc;
        }


        .touburight {
            width: 100px;
            height: 100%;
            font-size: 13px;
            color: #ccc;
            display: flex;
            align-items: center;
        }

        .tou-daohang {
            width: 1200px;
            height: 150px;
            /* border: 1px solid red; */
            margin-top: 20px;
        }

        .daohang-con {
            width: 1000px;
            height: 100%;
            /* border: 1px solid red; */
            display: flex;
            margin: 0 auto;
            justify-content: space-between;
            align-items: center;
        }

        .daohang-con .logo {
            width: 60px;
            height: 60px;
            /* border: 1px solid red; */
        }

        .daohang-con .logo img {
            width: 100%;
            height: 100%;
        }

        .daohang-con .fenlei {
            width: 607px;
            height: 100%;
            /* border: 1px solid red; */
            margin-left: 90px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            font-size: 12px;
            color: #333;
        }

        .daohang-con .kuang {
            width: 240px;
            height: 40px;
            display: flex;
        }

        .daohang-con .kuang .kuanga {
            width: 200px;
            height: 40px;
            border: 1px solid #ccc;
            border-right: none;
        }

        .daohang-con .kuang .kuangb {
            width: 40px;
            height: 40px;
            border: 1px solid #ccc;
        }


        .lunbotu {
            width: 1200px;
            height: 400px;
            /* border: 1px solid red; */
            margin-top: 20px;
        }

        .lunbotu .lunbotu-con {
            width: 1000px;
            height: 100%;
            /* border: 1px solid red; */
            margin: 0 auto;
            display: flex;

        }

        .lunbotu-con .lunbotu-con-a {
            width: 300px;
            height: 100%;
            /* border: 1px solid red; */
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            background-color: #ccc
        }

        .lunbotu-con .lunbotu-con-b {
            flex: 1;

        }

        .lunbotu-con .lunbotu-con-b img {
            width: 100%;
            height: 100%;
        }

        .lunbotu-con .lunbotu-con-a li {
            width: 100%;
            height: 35px;
            /* border: 1px solid red; */
            display: flex;
            justify-content: space-around;
        }

        .lunbotu-con .lunbotu-con-a li .kaifang {
            margin-top: 30px;
        }

        .lunbotu-up {
            width: 100%;
            height: 290px;
            margin-top: 30px;
            /* border: 1px solid red; */
        }

        .lunbotu-up .lunbotu-up-con {
            width: 1000px;
            height: 210px;
            /* border: 1px solid red; */
            margin: 0 auto;
            display: flex;
        }

        .lunbotu-up-con .lunbotu-up-left {
            width: 300px;
            height: 200px;

            display: flex;
            flex-direction: column;
            justify-content: space-around;
            background-color: #5f5750;

        }

        .lunbotu-up-con .lunbotu-up-left .left-a {
            width: 100%;
            height: 125px;

            display: flex;
            justify-content: space-around;
        }

        .lunbotu-up-con .lunbotu-up-left .left-b {
            width: 100%;
            height: 125px;

            display: flex;
            justify-content: space-around;
        }

        .lunbotu-up-con .lunbotu-up-right {
            width: 700px;
            height: 200px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-left: 20px;
        }

        .lunbotu-up-left .left-a li {
            color: #ccc;
            width: 90px;
            height: 100%;

            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
        }

        .lunbotu-up-left .left-a li .kaifang {
            margin-top: 20px;
        }

        .lunbotu-up-left .left-a li .goumai {
            margin-bottom: 40px;
        }

        .lunbotu-up-left .left-b li .kaifang {
            margin-top: 20px;
        }

        .lunbotu-up-left .left-b li .goumai {
            margin-bottom: 40px;
        }

        .lunbotu-up-con .lunbotu-up-left .left-b li {
            color: #ccc;
            width: 90px;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
        }

        .lunbotu-up-right li {
            width: 200px;
            height: 170px;

        }

        .lunbotu-up-right li img {
            width: 100%;
            height: 100%;
        }


        .lunbotu-up-right {
            display: flex;
            justify-content: space-around;
        }

        .dami .mingxing {
            width: 1200px;
            height: 300px;

            margin-top: 20px;
        }

        .mingxingcon {
            width: 1000px;
            height: 100%;

            margin: 0 auto;
            display: flex;
            flex-direction: column;
        }

        .tittle {
            width: 100%;
            height: 50px;

            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .tittle h3 {
            margin-left: 60px;
        }


        .pic {
            flex: 1;

            display: flex;
            justify-content: space-between;
        }

        .pic li {
            width: 220px;
            height: 100%;

            display: flex;
            font-size: 14px;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
        }

        .yingjian {
            width: 1200px;
            height: 460px;


        }

        .yingjiancon {
            width: 1000px;
            height: 100%;

            margin: 0 auto;
            display: flex;
        }

        .yingjiancon .yingjianleft {
            width: 300px;
            height: 100%;

        }

        .yingjiancon .yingjianleft img {
            width: 100%;
            height: 100%;
        }

        .yingjiancon .yingjianright {
            flex: 1;

            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .yingjiana {
            width: 100%;
            height: 220px;

            display: flex;
            justify-content: space-around;
        }

        .yingjianb {
            width: 100%;
            height: 220px;

            display: flex;
            justify-content: space-around;
        }

        .yingjiana li {
            width: 140px;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
        }

        .yingjianb li {
            width: 140px;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
        }

        .yingjiana li img {
            width: 140px;
            height: 140px;
        }

        .yingjianb li img {
            width: 140px;
            height: 140px;
        }

        .yingjianb li {
            width: 140px;
            height: 100%;


        }

        .end {
            width: 1200px;
            height: 500px;
            border: 1px solid red;
            margin-top: 30px;
        }

        .endcon {
            width: 1000px;
            height: 100%;
            border: 1px solid red;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .endcon .end1 {
            width: 100%;
            height: 40px;

            display: flex;

            align-items: center;
        }

        .endcon .end1 li {
            color: #666;
        }

        .endcon .end1 li .hour {
            padding-left: 30px;
            box-sizing: border-box;
        }

        .endcon .end1 li .gang {
            margin-left: 30px;
        }

        .endcon .end2 {
            width: 100%;
            height: 300px;

            display: flex;
            justify-content: space-around;
        }

        .endcon .end3 {
            width: 100%;
            height: 100px;
            border: 1px solid red;
        }

        .endcon .end2 .end2-a {
            width: 600px;
            height: 100%;
            border: 1px solid red;
        }

        .endcon .end2 .end2-b {
            width: 200px;
            height: 100%;
            border: 1px solid red;
        }

        .tianjia {
            width: 1000px;
            height: 30px;
            margin-left: 98px;
            margin-top: 0;
        }

        .dibu {
            margin-top: 30px;
            /* display: flex;
            justify-content: space-around;
            flex-direction: column;
            margin-top: 20px; */
        }
        .dibu li{margin-top: 20px;}

        .end2-a h4 {
            margin-top: 30px;
        }
    </style>
</head>

<body>
    <div class="dami">
        <div class="damitoubu">
            <div class="toubucon">
                <ul class="toubuleft">
                    <li>
                        <p>大米网</p><span>|</span>
                    </li>
                    <li>
                        <p>大米网</p><span>|</span>
                    </li>
                    <li>
                        <p>大米网</p><span>|</span>
                    </li>
                    <li>
                        <p>大米网</p><span>|</span>
                    </li>
                    <li>
                        <p>大米网</p><span>|</span>
                    </li>
                    <li>
                        <p>大米网</p><span>|</span>
                    </li>
                    <li>
                        <p>大米网</p><span>|</span>
                    </li>
                    <li>
                        <p>大米网</p><span>|</span>
                    </li>
                    <li>
                        <p>大米网</p><span>|</span>
                    </li>


                </ul>
                <div class="toubumiddle">
                    <p>登录</p>
                    <p>|</p>
                    <p>注册</p>
                </div>
                <div class="touburight">购物车（0）</div>
            </div>

        </div>
        <div class="tou-daohang">
            <div class="daohang-con">
                <div class="logo"><img src="xiaomi_logo.png" alt=""></div>
                <ul class="fenlei">
                    <li>大米手机</li>
                    <li>大米手机</li>
                    <li>大米手机</li>
                    <li>大米手机</li>
                    <li>大米手机</li>
                    <li>大米手机</li>
                    <li>大米手机</li>
                    <li>大米手机</li>
                    <li>大米手机</li>
                </ul>
                <div class="kuang">
                    <div class="kuanga"></div>
                    <div class="kuangb"></div>
                </div>
            </div>
        </div>
        <div class="lunbotu">
            <div class="lunbotu-con">
                <ul class="lunbotu-con-a">
                    <li>
                        <p>手机平板</p>
                        <p>&gt;</p>
                    </li>
                    <li>
                        <p>手机平板</p>
                        <p>&gt;</p>
                    </li>
                    <li>
                        <p>手机平板</p>
                        <p>&gt;</p>
                    </li>
                    <li>
                        <p>手机平板</p>
                        <p>&gt;</p>
                    </li>
                    <li>
                        <p>手机平板</p>
                        <p>&gt;</p>
                    </li>
                    <li>
                        <p>手机平板</p>
                        <p>&gt;</p>
                    </li>
                    <li>
                        <p>手机平板</p>
                        <p>&gt;</p>
                    </li>
                    <li>
                        <p>手机平板</p>
                        <p>&gt;</p>
                    </li>
                    <li>
                        <p>手机平板</p>
                        <p>&gt;</p>
                    </li>
                    <li>
                        <p>手机平板</p>
                        <p>&gt;</p>
                    </li>

                </ul>
                <div class="lunbotu-con-b"><img src="T1jrxjB_VT1RXrhCrK.jpg" alt=""></div>
            </div>



        </div>
        <div class="lunbotu-up">
            <div class="lunbotu-up-con">

                <div class="lunbotu-up-left">
                    <ul class="left-a">
                        <li>
                            <p class="kaifang">start</p>
                            <p class="goumai">开放购买</p>
                        </li>
                        <li>
                            <p class="kaifang">start</p>
                            <p class="goumai">开放购买</p>
                        </li>
                        <li>
                            <p class="kaifang">start</p>
                            <p class="goumai">开放购买</p>
                        </li>
                    </ul>
                    <ul class="left-b">
                        <li>
                            <p class="kaifang">start</p>
                            <p class="goumai">开放购买</p>
                        </li>
                        <li>
                            <p class="kaifang">start</p>
                            <p class="goumai">开放购买</p>
                        </li>
                        <li>
                            <p class="kaifang">start</p>
                            <p class="goumai">开放购买</p>
                        </li>
                    </ul>
                </div>



                <ul class="lunbotu-up-right">
                    <li><img src="T1mahQBmKT1RXrhCrK (1).jpg" alt=""></li>
                    <li><img src="T1yvd_BQDT1RXrhCrK.jpg" alt=""></li>
                    <li><img src="T184E_BQWT1RXrhCrK.jpg" alt=""></li>
                </ul>
            </div>
        </div>
        <div class="mingxing">
            <div class="mingxingcon">
                <div class="tittle">
                    <h3 style="color: #333;">大米明星单品</h3>

                    <p class="pa" style="margin-right: -759px; border: 1px solid #666;border-right: none;">&lt;</p>
                    <p class="pb" style="margin-right: 100px; border: 1px solid #666;">&gt;</p>


                </div>
                <ul class="pic">
                    <li><img src="hezis!160x110.jpg" alt=""><span>大米平板</span><span>顶配路由器</span></li>
                    <li><img src="hezis!160x110.jpg" alt=""><span>大米平板</span><span>顶配路由器</span></li>
                    <li><img src="hezis!160x110.jpg" alt=""><span>大米平板</span><span>顶配路由器</span></li>
                    <li><img src="hezis!160x110.jpg" alt=""><span>大米平板</span><span>顶配路由器</span></li>

                </ul>
            </div>
        </div>
        <div class="tianjia" style="font-size: 14px;font-weight: 800;">智能硬件</div>
        <div class="yingjian">
            <div class="yingjiancon">
                <div class="yingjianleft"><img src="T1IhLjBC_T1RXrhCrK.jpg" alt=""></div>
                <div class="yingjianright">
                    <ul class="yingjiana">
                        <li>
                            <img src="T16nVjBCKT1RXrhCrK.jpg" alt="">
                            <span>大米体重秤</span>
                            <span>手机管理健康</span>
                            <span>2799￥</span>
                        </li>
                        <li><img src="T16nVjBCKT1RXrhCrK.jpg" alt="">
                            <span>大米体重秤</span>
                            <span>手机管理健康</span>
                            <span>2799￥</span></li>
                        <li><img src="T16nVjBCKT1RXrhCrK.jpg" alt="">
                            <span>大米体重秤</span>
                            <span>手机管理健康</span>
                            <span>2799￥</span></li>
                        <li><img src="T16nVjBCKT1RXrhCrK.jpg" alt="">
                            <span>大米体重秤</span>
                            <span>手机管理健康</span>
                            <span>2799￥</span></li>
                    </ul>
                    <ul class="yingjianb">
                        <li><img src="T16nVjBCKT1RXrhCrK.jpg" alt="">
                            <span>大米体重秤</span>
                            <span>手机管理健康</span>
                            <span>2799￥</span></li>
                        <li><img src="T16nVjBCKT1RXrhCrK.jpg" alt="">
                            <span>大米体重秤</span>
                            <span>手机管理健康</span>
                            <span>2799￥</span></li>
                        <li><img src="T16nVjBCKT1RXrhCrK.jpg" alt="">
                            <span>大米体重秤</span>
                            <span>手机管理健康</span>
                            <span>2799￥</span></li>
                        <li><img src="T16nVjBCKT1RXrhCrK.jpg" alt="">
                            <span>大米体重秤</span>
                            <span>手机管理健康</span>
                            <span>2799￥</span></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="end">
            <div class="endcon">
                <ul class="end1">
                    <li><span class="hour">1小时快修服务</span><span class="gang">|</span> </li>
                    <li><span class="hour">1小时快修服务</span><span class="gang">|</span> </li>
                    <li><span class="hour">1小时快修服务</span><span class="gang">|</span> </li>
                    <li><span class="hour">1小时快修服务</span><span class="gang">|</span> </li>
                    <li><span class="hour">1小时快修服务</span><span class="gang">|</span> </li>
                </ul>
                <div class="end2">
                    <div class="end2-a">
                        <h4>帮助中心</h4>
                        <ul class="dibu">
                            <li>支付方式</li>
                            <li>支付方式</li>
                            <li>支付方式</li>
                        </ul>
                    </div>
                    <div class="end2-b"></div>
                </div>
                <div class="end3"></div>
            </div>

        </div>


    </div>






</body>

</html>